/**
 * 这个文件才是真正前端出发数据传递要调用的api
 * 角色表相关
 * 列表查询，搜索，重置相关
 */

import {reactive, ref, nextTick, onMounted} from "vue";
import type { ListParm } from "@/api/role/RoleModel.ts";
import { getListApi } from "@/api/role/index"

export default function useTable(){

    //定义表格高度
    const tableHeight = ref(0)
    //定义表格数据
    const tableList = reactive({
        list:[]
    })

    //列表参数(这是一个响应式的数据，意味着这里的数据发生变化，页面上的数据同时发生变化)
    const listParm = reactive<ListParm>({
        roleName:'',
        currentPage:1,
        pageSize:10,
        total:0
    })

    //列表查询
    const getList = async () => {
        let res = await getListApi(listParm)
        if (res && res.code == 200) {
            console.log(res)
            //设置表格数据
            tableList.list = res.data.records
            //设置总记录数
            listParm.total = res.data.total
        }
    }

    //搜索
    const searchBtn = ()=>{
        getList()
        console.log('搜索', listParm)
    }

    //重置，触发，查询一遍
    const resetBtn = ()=>{
        listParm.roleName = ''
        listParm.currentPage = 1
        getList()
        searchBtn()
    }

    //页容量改变时触发
    const sizeChange = (val: number) => {
        listParm.pageSize = val
        getList()
    }
    //页数改变时触发
    const currentChange = (val: number) => {
        listParm.currentPage = val
        getList()
    }

    //刷新列表时触发，查询一遍
    const refresh = () => {
        getList()
    }

    //页面打开时触发（钩子函数）
    onMounted(() => {
        getList()
        nextTick(() => {
            tableHeight.value = window.innerHeight - 230
        })
    })

    return{
        listParm,
        getList,
        searchBtn,
        resetBtn,
        tableList,
        sizeChange,
        currentChange,
        tableHeight,
        refresh

    }
}